<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#max{
			width: 100%;
			height: 800px;
			display: flex;
			justify-content: center;
		}
		#outdiv{
			width: 600px;
			height: 500px;
			overflow: hidden;
		}
		#imgdiv{
			width: 1600px;
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 200px;
		}
		#imgdiv img{
			width: 100px;
			height: 100px;
		}
		</style>
	</head>
	<body>
		<div id="max">
			<div id="outdiv">
				<div id="imgdiv" onmouseenter="mouseenter()" onmouseleave="mouseleave()">
					<img src="img/1.jpeg" >
					<img src="img/2.jpeg" >
					<img src="img/3.jpeg" >
					<img src="img/4.jpeg" >
					<img src="img/5.jpeg" >
					<img src="img/6.jpeg" >
					<img src="img/7.jpeg" >
					<img src="img/8.jpeg" >
					<img src="img/9.jpeg" >
					<img src="img/10.jpeg" >
					<img src="img/1.jpeg" >
					<img src="img/2.jpeg" >
					<img src="img/3.jpeg" >
					<img src="img/4.jpeg" >
					<img src="img/5.jpeg" >
					<img src="img/6.jpeg" >
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	var num = 0;
	var imgdivobj = document.getElementById('imgdiv');
	var setintobj = null;
	var temp = null;
		function xh(){
				num--;
				if(num == -1000){
					num = 0;
				}
				imgdivobj.style.marginLeft = num+'px';
				if (num%100==0) {
					clearInterval(setintobj);
					temp = setTimeout(function(){
						clearInterval(setintobj);
						setintobj = setInterval(xh,50);
					},500)
				}
		}
			
		function mouseenter(){
			clearInterval(setintobj);
			clearInterval(temp);
		}
			
		function mouseleave(){
			clearInterval(setintobj);
			setintobj = setInterval(xh,50);
		}
		onload = function(){
			setintobj = setInterval(xh,50);
		}
	</script>
</html>
